<template>
	<view class="modelbox" v-show="showModel">
		<view class="modelbg">
			<view class="modeltitle">
				{{modelMsg}}
			</view>
			<view class="modelbtn">
				<button class="cancle" @click="getModel(false)">{{$t('index.qx')}}</button>
				<button class="sure" @click="getModel(true)">{{$t('index.qr')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			modelMsg: {
				typeof: String,
				default () {
					return ''
				}
			},
			showModel: {
				typeof: Boolean,
				default () {
					return false
				}
			},
		},
		methods: {
			getModel(e) {
				this.$emit('getModel', e)
			},
		}
	}
</script>

<style lang="scss">
	.modelbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		background: #00000040;

		.modelbg {
			background: #fff;
			padding: 20px;
			border-radius: 5px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			box-shadow: 0 0 15px #eee;
			border: 1px solid #ddd;
			text-align: center;
		}

		.modelbtn {
			display: flex;
			align-items: center;
			margin-top: 20px;

			button {
				background-color: #ff2020;
				border: 1px solid #ff5353;
				color: #fff;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				max-width: 130px;
				width: 33vw;
				margin: 0 5px;
			}

			.cancle {
				background: transparent;
				color: #ff5353;
			}
		}
	}
</style>